import React, { useCallback, useEffect, useState } from 'react';
import { Checkbox } from 'antd';
import classNames from 'classnames';

import SalaryItemDropDown from '../SalaryItemDropDown';
import styles from './index.less';

const SalaryItemCheck = ({ selected, onChange, item }) => {
    const [checked, setChecked] = useState(false);

    useEffect(() => {
        setChecked(selected);
    }, [selected]);

    const handleChange = useCallback(() => {
        const newState = !checked;

        setChecked(newState);
        onChange({ checked: newState, item }, item);
    }, [onChange, checked, item]);

    return (
        <SalaryItemDropDown item={item}>
            <div className={classNames(styles.SalaryItemCheck, { [styles.selected]: checked })} onClick={handleChange}>
                <div>
                    <Checkbox checked={checked} onChange={handleChange} defaultChecked={false} />
                </div>
                <div>
                    <div>{item.parentTitle}</div>
                    <div>{item.title}</div>
                </div>
            </div>
        </SalaryItemDropDown>
    );
};
SalaryItemCheck.defaultProps = {
    selected: false,
    onChange: () => {}
};

export default React.memo(SalaryItemCheck);
